<template>
	<view class="contain">
		<view class="info">
			<!-- <view class="logout">退出登录</view> -->
			<view class="cu-avatar xl round margin-left head touxiang" :style="'background-image:url('+avatarUrl+');'"
				@click="getUserProfile()"></view>
			<view class="name">{{nick_name}}</view>
		</view>

		<view class="function flex solid-bottom padding justify-center">
			<view class=" padding-sm margin-xs radius" @click="to_publish()">
				<view class="flex-sub text-center">
					<view class=" text-xl ">
						<text class="lg text-blue cuIcon-apps"></text>
					</view>
					<view class="padding ">我的发布</view>
				</view>
			</view>
			<view class=" padding-sm margin-xs radius" @click="to_collect()">
				<view class="flex-sub text-center">
					<view class=" text-xl ">
						<text class="lg text-orange cuIcon-favor"></text>
					</view>
					<view class="padding">我的收藏</view>
				</view>
			</view>
			<view class=" padding-sm margin-xs radius" @click="to_comment()">
				<view class="flex-sub text-center">
					<view class=" text-xl ">
						<text class="lg text-green cuIcon-comment"></text>
					</view>
					<view class="padding">我的评论</view>
				</view>
			</view>
		</view>


		<view class="function flex  padding justify-start">
			<view class=" padding-sm margin-xs radius" @click="to_love()">
				<view class="flex-sub text-center">
					<view class=" text-xl ">
						<text class="lg text-yellow cuIcon-check"></text>
					</view>
					<view class="padding">我的评分</view>
				</view>
			</view>
			<view class=" padding-sm margin-xs radius">
				<view class="flex-sub text-center" @click="to_drafts()">
					<view class=" text-xl ">
						<text class="lg text-orange cuIcon-file"></text>
					</view>
					<view class="padding">草稿箱</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	let weixinAuthService
	export default {
		data() {
			return {
				// 微信用户的openid
				openid: "",
				// 是否已微信授权
				hasWeixinAuth: false,
				nick_name: "游客",
				avatarUrl: "https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg"
			};
		},
		created() {
			//this.getUserProfile()
			this.openid = uni.getStorageSync('openid');
			let u = uni.getStorageSync('avatarUrl');
			if(u.length !== 0)
			this.avatarUrl = u;
			let n = uni.getStorageSync('nick_name');
			if(n.length !== 0)
			this.nick_name = n;
			console.log(this.openid)
		},
		onLoad() {
			
			// #ifdef APP-PLUS
			plus.oauth.getServices((services) => {
				weixinAuthService = services.find((service) => {
					return service.id === 'weixin'
				})
				if (weixinAuthService) {
					this.hasWeixinAuth = true
				}
			});
			// #endif
			
		},
		onShow() {
			// this.openid = uni.getStorageInfoSync('openid');
			// this.avatarUrl = uni.getStorageSync('avatarUrl');
			// this.nick_name = uni.getStorageSync('nick_name');
		},
		methods: {
			// 获取用户信息
			getUserProfile() {
				let _this = this
				uni.getUserProfile({
					desc: "显示用户头像和用户名",
					lang: "zh_CN",
					// provider: "weixin",
					success: res => {
						// const userWeiXinAccInfo = res.userInfo;
						console.log(res);
						_this.avatarUrl = res.userInfo.avatarUrl
						_this.nick_name = res.userInfo.nickName
						_this.loginByWeixin()
					},
					fail: err => {
						console.log(err);
					}
				})
			},
			// 登陆
			loginByWeixin() {
				this.getWeixinCode().then((code) => {
					return uniCloud.callFunction({
						name: 'uni-id-test',
						data: {
							action: 'loginByWeixin',
							params: {
								code,
							}
						}
					})
				}).then((res) => {
					console.log(res.result)
					uni.showModal({
						showCancel: false,
						content: res.result.msg
					})
					if (res.result.code === 0) {
						uni.setStorageSync('openid', res.result.openid)
						this.openid = res.result.openid
						// uni.setStorageSync('uni_id_token_expired', res.result.tokenExpired)
					}
				}).catch((e) => {
					console.error(e)
					uni.showModal({
						showCancel: false,
						content: '微信登录失败，请稍后再试'
					})
				})
			},
			// 获取微信登陆码
			getWeixinCode() {
				return new Promise((resolve, reject) => {
					// #ifdef APP-PLUS
					weixinAuthService.authorize(function(res) {
						resolve(res.code)
					}, function(err) {
						console.log(err)
						reject(new Error('微信登录失败'))
					});
					// #endif
					// #ifdef MP-WEIXIN
					uni.login({
						provider: 'weixin',
						success(res) {
							resolve(res.code)
						},
						fail(err) {
							reject(new Error('微信登录失败'))
						}
					})
					// #endif
				})  
			},
			// 跳转到发布页面
			to_publish(){
				if(this.openid == "")
				return this.getUserProfile()
				uni.navigateTo({
					url: "/pages/my_published/index"
				})
			},
			//跳转到评论页面
			to_comment(item) {
				if(this.openid == "")
				return this.getUserProfile()
				//console.log(item)
				let _this = this
				uni.navigateTo({
					url: '/pages/my_published/index',
				})

			},
			// 跳转到草稿箱页面
			to_drafts() {
				if(this.openid == "")
				return this.getUserProfile()
				uni.navigateTo({
					url: "/pages/drafts/index"
				})
			},
			//跳转到收藏页面
			to_collect(item) {
				if(this.openid == "")
				return this.getUserProfile()
				//console.log(item)
				let _this = this
				uni.navigateTo({
					url: '/pages/my_published/index',
				})
			},
			//跳转到评分页面
			to_love(item) {
				if(this.openid == "")
				return this.getUserProfile()
				//console.log(item)
				let _this = this
				uni.navigateTo({
					url: '/pages/my_published/index',
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.contain {
		height: 100%;
		background-color: #ffffff;

		.info {
			position: relative;
			background-color: white;
			width: 100%;
			height: 25%;
			background-color: #F1D1D1;

			.logout {
				position: absolute;
				top: 5%;
				right: 6%;
				font-size: 30rpx;
				font-weight: bold;
			}

			.head {
				position: absolute;
				top: 20%;
				left: 7%;
			}

			.name {
				position: absolute;
				top: 35%;
				left: 30%;
				width: 300rpx;
				height: 50rpx;
				font-weight: bold;
				font-size: 40rpx;
			}
		}

		.function {
			margin-top: 20rpx;
			background-color: #F1D1D1;
			width: 95%;
			margin-left: 2.5%;
			border-radius: 30rpx;
			height: 20%;

			.font {
				margin-top: -20rpx;
				line-height: 200%;
				font-weight: bold;
			}

			.comment {
				position: absolute;
				top: 31%;
				height: 4%;
				right: 0;
				margin-right: 0;
				width: 90%;
				padding: 0;
				border-bottom: 1rpx solid #ccc;

				.right {
					position: absolute;
					right: 10rpx;
					top: -10rpx;
				}
			}

			.icon_comment {
				position: absolute;
				top: 30%;
				left: 10rpx;
			}

			.collect {
				position: absolute;
				height: 4%;
				top: 38%;
				right: 0;
				width: 90%;
				border-bottom: 1rpx solid #ccc;

				.right {
					position: absolute;
					right: 10rpx;
					top: -10rpx;
				}

			}

			.icon_collect {
				position: absolute;
				top: 37%;
				left: 10rpx;
			}

			.love {
				height: 4%;
				position: absolute;
				top: 45%;
				right: 0;
				width: 90%;
				border-bottom: 1rpx solid #ccc;

				.right {
					position: absolute;
					right: 10rpx;
					bottom: 20rpx;
				}

			}

			.icon_love {
				position: absolute;
				top: 44%;
				left: 10rpx;
			}

			.icon_pyq {
				position: absolute;
				top: 50.5%;
				left: 10rpx;
			}

			.publish {
				height: 4%;
				position: absolute;
				top: 50.5%;
				right: 0;
				width: 90%;

				text {
					font-weight: bold;
				}

				.right {
					position: absolute;
					right: 10rpx;
					top: 4rpx;
					font-weight: normal;
				}
			}
		}
	}
</style>
